
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>html - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>html - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">一个标准的网页由哪三个核心部分组成，它们各自扮演什么角色？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">网页由HTML、CSS和JavaScript三个核心部分组成。HTML负责定义页面结构，CSS负责页面的样式表现，而JavaScript负责处理页面的交互行为。</div>
          </div>
          <div class="card-source">来源: 4 网页的组成部分(HTML+CSS+JAVASCRIPT)</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">HTML的全称是什么？它被称作“标记语言”的原因是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">HTML的全称是“超文本标记语言”（Hyper Text Markup Language）。它被称为标记语言，是因为它主要是通过各种HTML标记（标签）来对网页中的文本、图片、声音等内容进行描述和定义。</div>
          </div>
          <div class="card-source">来源: 5 HTML简介</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">一个基本的HTML文档由哪些核心标签构成？为了正确显示中文，通常在哪个标签内设置什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">一个基本的HTML文档结构由 `<html>`、`<head>` 和 `<body>` 标签构成。为了正确显示中文等字符，通常在 `<head>` 标签内部通过 `<meta charset="UTF-8">` 来设置编码类型。</div>
          </div>
          <div class="card-source">来源: 6 HTML基本结构</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">请描述在HTML中创建无序列表、有序列表和自定义列表分别使用哪些核心标签？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">1. 无序列表：使用 `<ul>` 标签开始，每个列表项由 `<li>` 标签定义。<br>2. 有序列表：使用 `<ol>` 标签开始，每个列表项也由 `<li>` 标签定义。<br>3. 自定义列表：使用 `<dl>` 标签开始，每个列表项的标题（项目）由 `<dt>` 定义，对应的描述（注释）由 `<dd>` 定义。</div>
          </div>
          <div class="card-source">来源: 7.4 列表-无序列表, 7.5 列表-有序列表, 7.6 列表-有序列表</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">HTML中的 `<a>` 标签主要有哪两种用途？它们分别是通过哪个属性来实现的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">`<a>` 标签主要有两种用途：<br>1. 通过 `href` 属性创建指向另一个文档的超链接。<br>2. 通过 `name` 属性在文档内部创建书签（也称为锚点），用于页面内的跳转。</div>
          </div>
          <div class="card-source">来源: 7.10 超链接</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">在HTML中，构成一个基本表格需要使用哪些标签？它们分别定义了表格的哪个部分？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">构成一个基本表格需要使用 `<table>`、`<tr>` 和 `<td>` 标签。`<table>` 标签用于定义整个表格；`<tr>` 标签用于定义表格中的行；`<td>` 标签用于定义行中的单元格（表格数据）。</div>
          </div>
          <div class="card-source">来源: 7.11 表格</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">HTML中的 `<frameset>` 和 `<iframe>` 标签在功能上有什么核心区别？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">核心区别在于作用范围和方式不同。`<frameset>` 用于将整个浏览器窗口分割成多个独立的框架，每个框架显示一个页面。而 `<iframe>`（内联框架）则是在一个现有的网页内部嵌入并显示另一个网页。</div>
          </div>
          <div class="card-source">来源: 8 HTML框架, 9 HTML内联框架</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">如何使用 `<iframe>` 作为链接的目标，使得点击链接时，内容在 `<iframe>` 内部加载？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">首先，需要为 `<iframe>` 标签设置一个 `name` 属性。然后，将链接 `<a>` 标签的 `target` 属性值设置为 `<iframe>` 的 `name` 属性值。这样，点击该链接时，链接指向的文档就会在指定的 `<iframe>` 中加载。</div>
          </div>
          <div class="card-source">来源: 9 HTML内联框架</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">DNS的全称是什么？它在用户访问互联网时扮演了什么关键角色？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">DNS的全称是域名系统（Domain Name System）。它的关键角色是作为一个分布式数据库，将用户易于记忆的域名（如www.baidu.com）映射到机器能够直接读取的IP地址。这个过程称为域名解析，它让用户无需记住复杂的IP地址串就能方便地访问互联网。</div>
          </div>
          <div class="card-source">来源: 10 补充说明：常见名词的解释</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
